<template>
    <div style="display: flex; width: 100%;">
        <div ref="main" :style="style"></div>
    </div>
</template>


<script>
import * as echarts from "echarts/core";
import { PieChart, LineChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
    GridComponent,
    ToolboxComponent,
} from 'echarts/components';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { SVGRenderer } from 'echarts/renderers';

echarts.use([
    GridComponent,
    ToolboxComponent,
    PieChart,
    LineChart,
    SVGRenderer
]);

export default {
    props: ['opt', 'style'],
    mounted() {
        this.Chart = echarts.init(this.$refs.main);
        this.Chart.setOption(this.opt);
    },
    watch: {
        'opt': {
            handler(n) {
                this.Chart.setOption(n);
            },
            deep: true,
        },
        '$cfg.sswd': {
            handler(newVal) {
                this.Chart.resize();  
            },
        },
    },
    beforeUnmount() {
        if (this.Chart) {
            this.Chart.dispose();
        }
    },
};
</script>
